<template>
  <div class="help-info-container">
    <el-collapse v-model="activeNames" style="margin-left: 30px; margin-right: 30px;">
      <el-collapse-item title="1 标记流程" name="1">
        <el-steps :active="4" style="margin: 40px; width: 60%;" align-center>
          <el-step title="步骤1" icon="el-icon-plus" description="选择本地待标记视频"></el-step>
          <el-step title="步骤2" icon="el-icon-picture" description="在视频上方，使用鼠标标记视频中的物体"></el-step>
          <el-step title="步骤2" icon="el-icon-edit" description="编辑标记物和轨迹"></el-step>
          <el-step title="步骤3" icon="el-icon-upload" description="点击“标记完成”上传标记结果"></el-step>
        </el-steps>
      </el-collapse-item>
      <el-collapse-item title="2 标记模式说明" name="2">
        <div class="mode-title">2.1 播放标记</div>
        <p class="mode-content">快捷键：q/Q; 此模式下，鼠标按下后开始播放视频并且记录鼠标位置，鼠标松开暂停播放并停止记录鼠标位置。</p>
        <el-divider class="mode-divider"></el-divider>
        <div class="mode-title">2.2 分帧调整</div>
        <p class="mode-content">快捷键：w/W; 此模式下，点击选择视频上方可见的标记物，拖拽以调整标记物大小和位置。</p>
        <el-divider class="mode-divider"></el-divider>
        <div class="mode-title">2.3 分帧标记</div>
        <p class="mode-content">快捷键：e/E; 此模式下，在视频上方点击或拖拽表示从当前帧添加标记物直到视频结束帧。</p>
      </el-collapse-item>
      <el-collapse-item title="3 轨迹操作" name="3">
        <div class="mode-title">3.1 合并</div>
        <p class="mode-content">拖拽一段轨迹到另一个轨迹上，如果两段轨迹没有重叠区域，则可执行合并操作。</p>
        <el-divider class="mode-divider"></el-divider>
        <div class="mode-title">3.2 删除</div>
        <p class="mode-content">拖拽轨迹到视频两侧的空白区域，则可删除轨迹。</p>
      </el-collapse-item>
      <el-collapse-item title="4 快捷键" name="4">
        <p class="mode-content">a/A: 上一帧</p>
        <p class="mode-content">d/D: 下一帧</p>
        <p class="mode-content">q/Q: 播放标记模式</p>
        <p class="mode-content">w/W: 分帧调整模式</p>
        <p class="mode-content">e/E: 分帧标记模式</p>
      </el-collapse-item>
      <el-collapse-item title="5 其他" name="4">
        <p class="mode-content">在当前帧标记信息列表中，点击“删除”可删除当前帧标记的轨迹点。</p>
        <p class="mode-content">在当前帧标记信息列表中，点击轨迹名称可重新定义轨迹名称。</p>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      activeNames: "1",
      msg: "Welcome to Your Vue.js App"
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.part-title {
  font-size: 1.2em;
  font: bold;
  margin-left: 30px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.mode-title {
  font-size: 1.1em;
  font: bold;
  margin-left: 50px;
  margin-top: 10px;
  margin-bottom: 20px;
}
.mode-content {
  font-size: 1em;
  margin-left: 50px;
}
.mode-divider {
  margin-left: 50px;
  margin-right: 50px;
  width: 60%;
}
.help-info-container {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: scroll;
}
</style>
